<template>
  <div>
    <div>案例</div>
    <div>当前坐标：{{'(' + position.x + ',' + position.y + ')'}}</div>
    <hr>
    <div>当前数量：{{count}}</div>
    <button @click="handleClick">点击</button>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 1. 记录鼠标的坐标
    const position = reactive({
      x: 0,
      y: 0
    })

    // 控制鼠标的变化
    const move = (e) => {
      position.x = e.clientX
      position.y = e.clientY
    }

    // 组件挂载成功后监听鼠标的移动
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })

    // 组件卸载的时候解绑事件
    onUnmounted(() => {
      document.removeEventListener('mousemove', move)
    })

    // --------------------------------------------
    // 2. 实现点击累加效果
    const count = ref(0)

    const handleClick = () => {
      count.value += 1
    }

    return { position, count, handleClick }
  }
}
</script>
